/* 后台管理 */
<template>
  <div class="admin">
    <div class="header">
      <div class="line"></div>
      <div class="title cr-hui fs-22 familyC">后台管理</div>
    </div>
    <div class="content">
      <laboratoryRightHeader
        :showAdd="true"
        :tabList="tabList"
        :commonIndex="commonIndex"
        @setDailog="
          (event) => {
            dialogFormVisible = event;
          }
        "
        @setTab="(event) => (commonIndex = event)"
      ></laboratoryRightHeader>
      <div class="table">
        <template v-if="commonIndex === 0">
          <adminRightTableHeader
            :tableTimeValue="tableTimeValue"
            :type="'datetimerange'"
            @outValue="(event) => (tableTimeValue = event)"
          ></adminRightTableHeader>
          <scroll :height="86">
            <mergeTable
              :tableData="equipment.tableList"
              :tableConfig="equipment.config"
            >
              <el-table-column
                slot="index"
                align="center"
                type="index"
                label="序号"
              ></el-table-column>
            </mergeTable>
          </scroll>
        </template>
        <template v-if="commonIndex === 1">
          <adminRightTableHeader
            :tableTimeValue="tableTimeValue"
            :type="'datetimerange'"
            @outValue="(event) => (tableTimeValue = event)"
          ></adminRightTableHeader>
          <scroll :height="86">
            <mergeTable
              :tableData="consumables.tableList"
              :tableConfig="consumables.config"
            >
              <el-table-column
                slot="index"
                align="center"
                type="index"
                label="序号"
              ></el-table-column>
              <el-table-column align="center" label="存放位置" slot="floorNum">
                <template slot-scope="{ row }">
                  <span class="fs-12">{{
                    tableCommonMethod.getfloorNumStatus(row.floorNum)
                  }}</span>
                </template>
              </el-table-column>
            </mergeTable>
          </scroll>
        </template>
        <template v-if="commonIndex === 2">
          <adminRightTableHeader
            :keys="'facultyNo'"
            :valueKey="'facultyNo'"
            :label="'facultyName'"
            :showTime="false"
            :options="tableHeaderConfig.options"
            :optionsTitle="tableHeaderConfig.optionsTitle"
            @outOptionValue="(event) => (formData.facultyNo = event)"
          ></adminRightTableHeader>
          <scroll :height="86">
            <mergeTable
              :tableData="laboratory.tableList"
              :tableConfig="laboratory.config"
            >
              <el-table-column
                slot="index"
                align="center"
                type="index"
                label="序号"
              ></el-table-column>
              <el-table-column align="center" label="设备清单" slot="order">
                <template slot-scope="{ row }">
                  <div
                    class="fs-12 cr-main cursor flex-column"
                    @click="orderDialog(row)"
                  >
                    查看
                    <div class="lookline"></div>
                  </div>
                </template>
              </el-table-column>
            </mergeTable>
          </scroll>
        </template>
        <paging @onPage="onPage" @onNum="onNum" :total="total" />
      </div>
    </div>
    <!-- 设备管理新增弹窗 -->
    <equipmentListDialog
      v-if="commonIndex === 0"
      :dialogFormVisible="dialogFormVisible"
      :laboratoryData="laboratoryData"
      :addDetailInfo="equipment.addDetailInfo"
      :title="title"
      @setDialog="
        (event) => {
          dialogFormVisible = event;
        }
      "
    ></equipmentListDialog>
    <!-- 耗材管理新增弹窗 -->
    <consumablesDialog
      v-if="commonIndex === 1"
      :laboratoryData="laboratoryData"
      :dialogFormVisible="dialogFormVisible"
      :addDetailInfo="consumables.addDetailInfo"
      :title="title"
      @setDialog="
        (event) => {
          dialogFormVisible = event;
        }
      "
    ></consumablesDialog>
    <!-- 新增实验室弹窗 -->
    <laboratoryDialog
      v-if="commonIndex === 2"
      :facultyOptions="tableHeaderConfig.options"
      :userInfoDetail="userInfoDetail"
      :dialogFormVisible="dialogFormVisible"
      :title="title"
      @setDialog="
        (event) => {
          dialogFormVisible = event;
        }
      "
    ></laboratoryDialog>
    <!-- 设备清单弹窗 -->
    <tableDialog
      :dialogTableVisible="order.orderTableDialog"
      :title="'设备清单'"
      :showTime="true"
      :total="order.total"
      :uploadTrue="false"
      :type="'datetimerange'"
      :tableTimeValue="diatableTimeValue"
      :diaPageNum="formData.diaPageNum"
      :diaPageSize="formData.diaPageSize"
      @outValue="(event) => (diatableTimeValue = event)"
      @close="
        (event) => {
          order.orderTableDialog = event;
        }
      "
    >
      <template #table>
        <mergeTable :tableData="order.table" :tableConfig="order.config">
          <el-table-column
            slot="index"
            align="center"
            type="index"
            label="编号"
          ></el-table-column>
        </mergeTable>
      </template>
    </tableDialog>
  </div>
</template>

<script>
import {
  equipmentListConfig,
  consumablesConfig,
  laboratoryConfig,
  laboratoryOrderConfig,
} from "@/jsonData/table";
import adminRightTableHeader from "./adminRightTableHeader.vue";
import equipmentListDialog from "./equipmentListDialog.vue";
import consumablesDialog from "./consumablesDialog.vue";
import laboratoryDialog from "./laboratoryDialog.vue";
import tableCommonMethod from "@/utils/tableCommonMethod.js";
import {
  findPage,
  adminEquipmentMaintain,
  adminConsumablesList,
  devicefindPage,
  consumablesInfo,
  equipmentInfo,
} from "@/http/api";
export default {
  name: "admin",
  components: {
    adminRightTableHeader,
    equipmentListDialog,
    consumablesDialog,
    laboratoryDialog,
  },
  data() {
    return {
      total: 0,
      formData: {
        facultyNo: "",
        laboratoryNo: "",
        eventType: null,
        startTime: "",
        endTime: "",
        pageSize: 10,
        pageNum: 1,
        maintainType: "",
        diaPageNum: 1,
        diaPageSize: 10,
        diastartTime: "",
        diaendTime: "",
      },
      tableTimeValue: [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ],
      diatableTimeValue: [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ],
      tableHeaderConfig: {
        optionsTitle: "学院名称",
        options: [],
      },
      tableCommonMethod: tableCommonMethod,
      equipment: {
        tableList: [],
        config: equipmentListConfig,
        addDetailInfo: {},
      },
      consumables: {
        tableList: [],
        config: consumablesConfig,
        addDetailInfo: {},
      },
      laboratory: {
        tableList: [],
        config: laboratoryConfig,
        total: 0,
      },
      order: {
        orderTableDialog: false,
        table: [],
        config: laboratoryOrderConfig,
        total: 0,
      },
      dialogFormVisible: false,
      title: "设备新增",
      commonIndex: 0,
      tabList: [
        {
          id: 0,
          name: "设备管理",
        },
        {
          id: 1,
          name: "耗材管理",
        },
        {
          id: 2,
          name: "实验室管理",
        },
      ],
      laboratoryData: [],
      userInfoDetail: {},
    };
  },
  mounted() {
    this.formData.startTime = this.$getTime(this.tableTimeValue[0]);
    this.formData.endTime = this.$getTime(this.tableTimeValue[1]);
    this.tableHeaderConfig.options = JSON.parse(
      localStorage.getItem("departmentData")
    );
    this.tableHeaderConfig.options.unshift({
      facultyNo: "",
      facultyName: "全部",
    });
    this.laboratoryData = JSON.parse(localStorage.getItem("laboratoryData"));
    this.userInfoDetail = JSON.parse(localStorage.getItem("userInfo"));
    this.initconsumablesInfo();
    this.initequipmentInfo();
    this.initadminEquipmentMaintain();
  },
  methods: {
    // 耗材入库新增初始化
    async initconsumablesInfo() {
      let res = await consumablesInfo();
      if (res.code === 20000) {
        this.consumables.addDetailInfo = res.data;
      }
    },

    // 设备管理新增初始化
    async initequipmentInfo() {
      let res = await equipmentInfo();
      if (res.code === 20000) {
        this.equipment.addDetailInfo = res.data;
      }
    },
    // 设备管理列表
    async initadminEquipmentMaintain() {
      let params = {
        pageNum: this.formData.pageNum,
        pageSize: this.formData.pageSize,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
      };
      let res = await adminEquipmentMaintain(params);
      if (res.code === 20000) {
        this.equipment.tableList = res.data.rows;
        this.total = res.data.total;
      }
    },

    // 耗材管理列表
    async initadminConsumablesList() {
      let params = {
        pageNum: this.formData.pageNum,
        pageSize: this.formData.pageSize,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
      };
      let res = await adminConsumablesList(params);
      if (res.code === 20000) {
        this.consumables.tableList = res.data.rows;
        this.total = res.data.total;
      }
    },
    // 实验室列表
    async initfindPage() {
      let params = {
        pageNum: this.formData.pageNum,
        pageSize: this.formData.pageSize,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
        facultyNo: this.formData.facultyNo,
      };
      let res = await findPage(params);
      if (res.code === 20000) {
        this.laboratory.tableList = res.data.rows;
        this.total = res.data.total;
      }
    },
    /* 确定按钮 */
    onPage(val) {
      this.formData.pageSize = val;
      this.initData(this.commonIndex);
    },
    onNum(val) {
      this.formData.pageNum = val;
      this.initData(this.commonIndex);
    },
    /* 确定按钮 */
    submit() {},
    orderDialog(row) {
      this.resetdia();
      this.order.orderTableDialog = true;
      this.formData.laboratoryNo = row.laboratoryNo;
      this.getdevicefindPage();
    },
    async getdevicefindPage() {
      let params = {
        laboratoryNo: this.formData.laboratoryNo,
        startTime: this.formData.diastartTime,
        endTime: this.formData.diaendTime,
        pageNum: this.formData.diaPageNum,
        pageSize: this.formData.diaPageSize,
      };
      let res = await devicefindPage(params);
      if (res.code === 20000) {
        this.order.table = res.data.rows;
        this.order.total = res.data.total;
      }
    },
    resetdia() {
      let originTimeValue = [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ];
      this.formData.diaPageNum = 1;
      this.formData.diaPageSize = 10;
      this.formData.diastartTime = this.$getTime(originTimeValue[0], true);
      this.formData.diaendTime = this.$getTime(originTimeValue[1], true);
      this.diatableTimeValue = [
        this.formData.diastartTime,
        this.formData.diaendTime,
      ];
    },
    reset() {
      let originTimeValue = [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ];
      this.formData.pageNum = 1;
      this.formData.pageSize = 10;
      this.formData.startTime = this.$getTime(originTimeValue[0], true);
      this.formData.endTime = this.$getTime(originTimeValue[1], true);
      this.tableTimeValue = [this.formData.startTime, this.formData.endTime];
    },
    initData(val) {
      switch (val) {
        case 0:
          this.title = "新增设备";
          this.initadminEquipmentMaintain();
          break;
        case 1:
          this.title = "新增耗材入库";
          this.initadminConsumablesList();
          break;
        case 2:
          this.title = "新增实验室";
          this.initfindPage();
          break;
      }
    },
  },
  watch: {
    tableTimeValue: {
      handler(val) {
        this.formData.startTime = val[0];
        this.formData.endTime = val[1];
        this.initData(this.commonIndex);
      },
      deep: true,
    },
    commonIndex(val) {
      this.reset();
      this.initData(val);
    },
    diatableTimeValue: {
      handler(val) {
        this.formData.diastartTime = val[0];
        this.formData.diaendTime = val[1];
        this.getdevicefindPage();
      },
      deep: true,
    },
    "formData.facultyNo": {
      handler(val) {
        this.initData(this.commonIndex);
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.admin {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .header {
    height: 80px;
    flex-shrink: 0;
    padding: 0px 32px;
    display: flex;
    align-items: center;
    position: relative;
    .line {
      width: 4px;
      height: 24px;
      margin-right: 16px;
      background: #00bfb1;
      border-radius: 2px;
    }
  }
  .content {
    flex: 0.97;
    overflow: hidden;
    margin: 0px 32px;
    background: #fff;
    box-shadow: 0px 20px 39px 1px rgba(8, 46, 68, 0.04);
    position: relative;
    .table {
      padding: 0px 24px;
      height: 85%;
      .tableDetail {
        height: 64px;
      }
      .bottom-wrap {
        left: 48px !important;
        right: 48px !important;
        position: absolute;
        bottom: 20px;
      }
    }
  }
}
</style>
<style lang="scss">
.bottom {
  display: flex;
  justify-content: flex-end;
  .more {
    cursor: pointer;
    margin-top: 28px;
    margin-left: 24px;
    width: 90px;
    height: 28px;
    border: 1px solid #00bfb1;
    border-radius: 2px;
    text-align: center;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00bfb1;
    line-height: 28px;
  }
}
// .scrolls {
//   height: 98% !important;
// }
.el-form.demo-ruleForm {
  .selectT {
    width: 100% !important;
  }
  position: relative;
  .el-form-item__label {
    padding: 0px !important;
    line-height: 20px !important;
  }
  .maintenanceInput {
    width: 90% !important;
  }
  .maintenancePeriod {
    position: absolute;
    right: 3%;
  }
  .el-date-editor.el-input {
    width: 100% !important;
    margin-right: 0px !important;
  }
}
</style>